<template>
	<div class="page-wrap">
		<div class="page-content p-0">
			<div class="Dpage-column p-0">
				<div class="search">
					<div class="left">
						<el-form label-width="0px" label-position="left" :model="ruleForm" ref="form">
							<el-form-item label prop="typeSelect">
								<select-para
									size="small"
									class="smallForm"
									v-model="ruleForm.typeSelect"
									:label.sync="ruleForm.typeSelectName"
									:options="typeSelectOptions"
									@change="setOption(0)"
								></select-para>
							</el-form-item>
						</el-form>
					</div>
					<div class="Dright">
						<div class="m-r-12">
							<el-form :rules="rules" label-width="0px" label-position="left" :model="ruleForm" ref="form">
								<el-form-item label prop="nameSelect">
									<select-para
										v-if="paramsnameSelect"
										size="small"
										class="smallForm m-r-12"
										v-model="ruleForm.nameSelect"
										placeholder="请选择参数"
										:label.sync="ruleForm.nameSelectName"
										:options="nameSelectOptions"
										@change="getChartsData()"
									></select-para>
								</el-form-item>
							</el-form>
						</div>
						<div>
							<el-form :rules="rules" label-width="0px" label-position="left" :model="ruleForm" ref="form">
								<el-form-item label prop="probabilitySelect">
									<select-para
										v-if="paramsnameSelect"
										size="small"
										class="smallForm"
										v-model="ruleForm.probabilitySelect"
										placeholder="请选择概率"
										:label.sync="ruleForm.probabilitySelectName"
										:options="proSelectOptions"
										@change="getChartsData()"
									></select-para>
								</el-form-item>
							</el-form>
						</div>
					</div>
				</div>
				<div class="vcharts" v-show="vchartsShow">
					<div ref="main" :style="{width:'80vw',height:'400px'}"></div>
				</div>

				<div class="page-form p-0">
					<!-- <div class="separate m-b-20"></div> -->
					<div class="page-row p-x-0">
						<div class="box-left">
							<el-menu default-active="0" @select="change" class="el-menu-vertical-demo">
								<el-menu-item v-for="(item,index) in caselist" :key="index" :index="index.toString()">
									<span slot="title">{{item.casename}}</span>
								</el-menu-item>
							</el-menu>
						</div>
						<div class="box-right p-0">
							<div class="page-wrap">
								<div class="page-content p-0">
									<div class="page-column p-0" :style="{'overflow':'scroll'}">
										<el-row v-for="(item,index) in ShowList" :key="index">
											<el-col :span="24">
												<div class="my_title p-b-20">参数{{index}}:{{item.param_name}}</div>
												<el-table v-loading="loading" border :data="item['paramTab']" style="width: 100%">
													<el-table-column align="center" prop="distance" label="距离" min-width="100"></el-table-column>

													<el-table-column align="center" prop="MEAN" label="MEAN" min-width="100">
														<template slot-scope="scope">
															<div v-if="scope.row.MEAN=='1.7976931348623157e+308'">超出上限</div>
															<div v-else>{{scope.row.MEAN}}</div>
														</template>
													</el-table-column>
													<el-table-column align="center" prop="WUSHITH" label="50TH" min-width="100">
														<template slot-scope="scope">
															<div v-if="scope.row.WUSHITH=='1.7976931348623157e+308'">超出上限</div>
															<div v-else>{{scope.row.WUSHITH}}</div>
														</template>
													</el-table-column>
													<el-table-column align="center" prop="JIUSHITH" label="90TH" min-width="100">
															<template slot-scope="scope">
															<div v-if="scope.row.JIUSHITH=='1.7976931348623157e+308'">超出上限</div>
															<div v-else>{{scope.row.JIUSHITH}}</div>
														</template>
													</el-table-column>
													<el-table-column align="center" prop="JIUWUTH" label="95TH" min-width="100">
															<template slot-scope="scope">
															<div v-if="scope.row.JIUWUTH=='1.7976931348623157e+308'">超出上限</div>
															<div v-else>{{scope.row.JIUWUTH}}</div>
														</template>
													</el-table-column>
													<el-table-column align="center" prop="JIUJIUTH" label="99TH" min-width="100">
														<template slot-scope="scope">
															<div v-if="scope.row.JIUJIUTH=='1.7976931348623157e+308'">超出上限</div>
															<div v-else>{{scope.row.JIUJIUTH}}</div>
														</template>
													</el-table-column>
													<el-table-column align="center" prop="JIUJIUWUTH" label="99.5TH" min-width="100">
														<template slot-scope="scope">
															<div v-if="scope.row.JIUJIUWUTH=='1.7976931348623157e+308'">超出上限</div>
															<div v-else>{{scope.row.JIUJIUWUTH}}</div>
														</template>
													</el-table-column>
												</el-table>
												<div class="separate m-b-20"></div>
											</el-col>
										</el-row>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import selectPara from "@/components/selectPara"
import commCheckbox from "@/components/commCheckbox"
import ImageCropper from "@/components/ImageCropper"
import FixBottomButton from "@/components/FixBottomButton"
import ueditor from "@/components/ueditor"
import textLength from "@/components/common/comp/textLength"
import { commPara } from "@/mixins/mixins"
import { mapState } from "vuex"
import Axios from "axios"
import { dome, selecttext } from "@/utils/verify.js"
import numerify from "numerify"
// import {
//     saveslbaseinfo,
//     slbaseinfo
// } from '../service.js';
export default {
	name: "aboutUs",
	props: {
		basicDataF: Object,
	},
	mixins: [commPara],
	components: {
		selectPara,
		ImageCropper,
		textLength,
		commCheckbox,
		FixBottomButton,
		ueditor,
	},

	data() {
		return {
			activeTab: "2",
			YANTUANNumoptions: [],
			PARAMSoptions: [],
			distinceList: [],
			caselist: [],
			ShowList: [],
			paramsnameSelect: false,
			typeSelectOptions: [],
			nameSelectOptions: [],
			proSelectOptions: [
				{
					label: "MEAN",
					value: "0",
				},
				{
					label: "50TH",
					value: "2",
				},
				{
					label: "90TH",
					value: "3",
				},
				{
					label: "95TH",
					value: "4",
				},
				{
					label: "99TH",
					value: "5",
				},
				{
					label: "99.5TH",
					value: "6",
				},
			],
			ruleForm: {
				typeSelect: "",
				typeSelectName: "",
				nameSelect: "",
				nameSelectName: "",
				probabilitySelect: "",
				probabilitySelectName: "",
			},
			tableData: [],
			tableDataShow: false,
			vchartsShow: false,
			rules: {
				typeSelect: [
					{
						validator: selecttext,
						trigger: ["change", "blur"],
					},
				],
				nameSelect: [
					{
						validator: selecttext,
						trigger: ["change", "blur"],
					},
				],
				probabilitySelect: [
					{
						validator: selecttext,
						trigger: ["change", "blur"],
					},
				],
			},
			loading: false,
		}
	},
	computed: {
		...mapState({
			basic_Data: (state) => state.token.basic_Data,
			early_Data: (state) => state.token.early_Data,
			longterm_Data: (state) => state.token.longterm_Data,
		}),
	},
	created() {
		this.getDATA()
	},
	methods: {
		getDATA() {
			let params = {
				batch_id: this.$route.query.id,
			}
			// console.log(params)
			this.$appApi
				.GET_RESULT_TYPE(params)
				.then((res) => {
					var str = res.data.substring(0, 1)
					if (str == "S") {
						var str = res.data.substring(8).split(",")
						this.typeSelectOptions = str.map((item, index) => {
							return {
								label: item,
								value: index,
							}
						})
					} else if (str == "E") {
						let message = res.data.substring(6)
						this.$notify.error({
							title: "请求数据失败！",
							message: message,
							type: "success",
						})
					}
				})
				.catch((err) => {
					console.log(err)
				})
		},

		change(index) {
			this.setOption(index)
		},
		setOption(e) {
			this.loading = true
			let params = {
				batch_id: this.$route.query.id,
				typenumber: 3,
			}
			this.$appApi
				.GET_RESULT_1_A(params)
				.then((res) => {
					var tempres = res.data.substring(0, 1)
					if (tempres == "S") {
						this.loading = false
						var str = JSON.parse(res.data.substring(8)).type1_list
						this.caselist = str
						let tempShowList = str[e].sourceterm
						this.ShowList = []
						tempShowList.forEach((item, index) => {
							if (index == this.ruleForm.typeSelect) {
								this.ShowList = item.param_list
							}
						})
						this.nameSelectOptions = []
						this.ShowList.forEach((paramitem, index) => {
							this.nameSelectOptions.push({
								label: paramitem.param_name,
								value: paramitem.param_name,
							})
							if (paramitem.param_dis_list.length > 1) {
								this.paramsnameSelect = true
							}
							this.ShowList[index][
								"paramTab"
							] = paramitem.param_dis_list.map((listitem) => {
								
								let tempTabList = {
									distance: listitem.distance,
									MEAN: listitem.fin_result_list[0],
									WUSHITH: listitem.fin_result_list[1],
									JIUSHITH: listitem.fin_result_list[2],
									JIUWUTH: listitem.fin_result_list[3],
									JIUJIUTH: listitem.fin_result_list[4],
									JIUJIUWUTH: listitem.fin_result_list[5],
								}

								return tempTabList
							})
						})
					} else if (tempres == "E") {
						let message = res.data.substring(6)
						this.$notify.error({
							title: "请求数据失败！",
							message: message,
							type: "success",
						})
					}
				})
				.catch((err) => {
					console.log(err)
				})
		},
		getChartsData() {
			this.$refs.form.validate((valid) => {
				if (valid) {
					this.vchartsShow = true

					let main = this.$refs.main
					if (main) {
						let myChart = this.$echarts.init(main)
						var option = {
							title: {
								text: "",
							},
							tooltip: {
								trigger: "axis",
							},
							legend: {
								data: [],
							},
							grid: {
								left: "3%",
								right: "4%",
								bottom: "3%",
								containLabel: true,
							},
							toolbox: {
								feature: {
									saveAsImage: {},
								},
							},
							xAxis: {
								type: "category",
								boundaryGap: false,
								data: [],
							},
							yAxis: {
								type: "value",
								name: "sv",
							},
							series: [],
						}
						myChart.setOption(option)
						myChart.showLoading()
						this.caselist.forEach((caseitem) => {
							//caseitem 每个案例
							caseitem.sourceterm.forEach((item, index) => {
								if (index == this.ruleForm.typeSelect) {
									//每个案例下用户选择的分类
									item.param_list.forEach((paramitem) => {
										//param_list
										if (
											paramitem.param_name ==
											this.ruleForm.nameSelect
										) {
											//用户选择的param
											if (
												paramitem.param_dis_list
													.length > 1
											) {
												//图表中导入距离
												if (option.xAxis.data == 0) {
													option.xAxis.data = paramitem.param_dis_list.map(
														(element) => {
															return element.distance
														}
													)
												}
												let a =
													caseitem.caseid +
													"_" +
													caseitem.casename
												let obj = option.legend.data.indexOf(
													a
												)
												if (obj == "-1") {
													option.legend.data.push(a)
													option.series.push({
														name: a,
														type: "line",
														stack: "总量",
														data: [],
													})
												} else {
												}
												let proindex = this.ruleForm
													.probabilitySelect
												option.series.forEach(
													(charitem) => {
														if (
															charitem.name == a
														) {
															charitem.data = []
															paramitem.param_dis_list.forEach(
																(ele) => {
																	charitem.data.push(
																		ele
																			.fin_result_list[
																			proindex
																		]
																	)
																}
															)
														}
													}
												)
												myChart.hideLoading()
												myChart.setOption(option)
											} else {
												this.vchartsShow = false
											}
										}
									})
								}
							})
						})
					}
				}
			})
		},
	},
}
</script>
<style lang="scss" scoped>
.page-flex-row /deep/ .el-collapse-item__header {
	background: #f3f9fe;
}
.Dpage-column {
	width: 100%;
	height: 100%;
	overflow: scroll;
	.search {
		width: 100%;
		height: auto;
		padding: 20px 0px;
		display: flex;
		justify-content: space-between;
		.Dright {
			display: flex;
			div {
				margin-left: 12px;
			}
		}
	}
	.vcharts {
		width: 100%;
		min-height: 300px;
		max-height: 400px;
	}
	// .page-form {
	// 	height: 600px;
	// 	overflow: scroll;
	// }
}
</style>